[iOS] Push通知に画像や動画などのファイルを添付する

本記事ではPush通知に画像や動画などのファイルを添付する実装を紹介します。

#iOS

#iPhone

平屋真吾

2020.05.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。CX事業本部の平屋です。

本記事ではPush通知に画像や動画などのファイルを添付する実装を紹介します。

iOS 10 で追加された User Notifications framework の機能を使用して通知へのファイル添付を実現します。

検証環境

macOS Mojave 10.15.3
Xcode Version 11.3.1
iPhone X, iOS 13.3

対応ファイル形式

画像、映像、音声を添付できます。具体的な形式はSupported File Typesに記載されています。

添付ファイルはアプリ側でダウンロードする必要があります。アプリ側での処理に使えるのは 最大30秒 なのでファイルサイズはなるべく小さい方が良いです。

実装内容

Push通知に画像や動画などのファイルを添付するには、主に以下の処理をアプリに実装します。

プッシュ通知のペイロードから添付ファイルのURLを取り出す
添付ファイルをダウンロードし、OSに提供する

またアプリの実装以外に関しては以下の対応が必要です。

添付ファイルをアプリから参照できる任意の場所に置く
プッシュ通知のペイロードに添付ファイルのURL情報を含める

アプリの実装

通常のPush通知と同様の処理

通常のPush通知と同様に、以下の処理などを実装します。

CapabilitiesのPush NotificationsをONにする
通知の使用許可のリクエスト
デバイストークンの取得
通知受信時の処理

上記処理の実装方法は以下の記事で解説しています。

[iOS 10] User Notifications framework を使用してリモート通知を受け取る処理を実装する #wwdc | Developers.IO

Notification Service app extension

Extensionの追加

Notification Service app extension というExtensionをアプリに追加します。

Extensionの概要や追加方法は以下の記事で解説しています。

[iOS 10] Notification Service app extension を使用してリモート通知のペイロードを編集する #wwdc | Developers.IO

Extensionの実装

Extensionを追加できたら、ExtensionのNotificationServiceクラス内に以下の処理を実装します。

(1) プッシュ通知から添付ファイルのURLを取り出す
(2) 添付ファイルをダウンロードする
(3) 添付ファイルの保存先のURLをOSに提供する

例えば以下のように実装します。

class NotificationService: UNNotificationServiceExtension {
    // 「リモート通知が端末に届いた後」かつ「ユーザーに通知を見せる前」のタイミングで呼ばれる
    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        guard let content = (request.content.mutableCopy() as? UNMutableNotificationContent) else {
            contentHandler(request.content)
            return
        }

        // (1) プッシュ通知のペイロードから添付ファイルのURLを取り出す
        // ペイロードのルートの`url`キーに対応する値がURLだと想定する
        guard let urlString = request.content.userInfo["url"] as? String,
            let url = URL(string: urlString) else {
            // ペイロードからurlを取り出せない場合
            contentHandler(content)
            return
        }

        // (2) 添付ファイルをダウンロードする
        let task = URLSession.shared.dataTask(with: url, completionHandler: { (data, response, error) in
            // URLの末尾が拡張子付きのファイル名であると想定する
            let fileName = url.lastPathComponent
            let writePath = URL(fileURLWithPath: NSTemporaryDirectory()).appendingPathComponent(fileName)

            do {
                try data?.write(to: writePath)

                // (3) 添付ファイルの保存先のURLをOSに提供する(contentHandler経由で)
                let attachment = try UNNotificationAttachment(identifier: fileName, url: writePath, options: nil)
                content.attachments = [attachment]
                contentHandler(content)
            } catch {
                print("error: \(error)")
                contentHandler(content)
            }
        })
        task.resume()
    }
}

アプリ以外の実装

ファイルを配置する

添付ファイルをアプリから参照できる任意の場所に配置します。

プッシュ通知を送信する

ペイロードに添付ファイルのURL情報を含めて送信します。

ペイロードの形式

ペイロードの例は以下の通りです。

{
    "aps": {
        "alert": {
            "title": "お知らせ",
            "body": "テスト"
        },
        "mutable-content": 1
    },
    "url": "https://example.com/001.jpg"
}

添付ファイルのURLはルートのディクショナリの中で{任意のキー} : {ファイルのURL}という形式で指定します。(上記の例の場合は"url": "https://esample.com/001.jpg")

また、Extensionの実装が呼ばれるようにするためにaps内に"mutable-content": 1を指定します。

プッシュ通知を送信する

プッシュ通知の送信にnode-apnを使用する場合、以下のような実装でファイルが添付されたプッシュ通知を送信できます。

var apn = require('apn');

// Set up apn with the APNs Auth Key
var apnProvider = new apn.Provider({
     token: {
        key: 'AuthKey_XXXXXXXXXX.p8',
        keyId: 'XXXXXXXXXX',
        teamId: 'YYYYYYYYYY',
    },
    production: false // Set to true if sending a notification to a production iOS app
});

// Enter the device token from the Xcode console
var deviceToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

// Prepare a new notification
var notification = new apn.Notification();

// Specify your iOS app's Bundle ID (accessible within the project editor)
notification.topic = 'com.example.RemoteNotificationWithAttachmentsSample';

// Set expiration to 1 hour from now (in case device is offline)
notification.expiry = Math.floor(Date.now() / 1000) + 3600;

// Display the following message (the actual notification text, supports emoji)
notification.alert = {"title": "お知らせ", "body" : "テスト"};

notification.mutableContent = 1
notification.payload = {"url": "https://example.com/001.jpg" };

// Actually send the notification
apnProvider.send(notification, deviceToken).then(function(result) {
    // Check the result for any failed devices
    console.log(result);
});